import { useModel } from '@umijs/max';
import { Carousel, Tooltip } from 'antd';
import cls from 'classnames';
import React, { useEffect, useState } from 'react';
import Styles from './AreaList.less';

type IProps = {
  areaList: API.StationAreaDTO[];
};
type StationListType = [API.StationAreaDTO, API.StationAreaDTO];
const AreaList: React.FC<IProps> = ({ areaList }) => {
  const { setInitialState } = useModel('@@initialState');
  const [getList, setGetList] = useState<[API.StationAreaDTO, API.StationAreaDTO][]>();
  const [currentArea, setCurrentArea] = useState();
  const pairAdjacentElements = (
    arr: API.StationAreaDTO[],
  ): StationListType[] | API.StationAreaDTO => {
    if (areaList.length > 1) {
      const result: StationListType[] = [];
      for (let i = 0; i < arr.length - 1; i++) {
        result.push([arr[i], arr[i + 1]]);
      }
      return result;
    } else {
      return arr;
    }
  };
  useEffect(() => {
    if (areaList?.length) {
      setGetList(pairAdjacentElements(areaList));
      setCurrentArea(areaList[0].id);
    }
  }, [areaList]);
  return (
    <>
      {areaList?.length === 1 ? (
        <div className={Styles.sItem}>
          <div
            className={cls([Styles.lItem, Styles.selected])}
            onClick={() => {
              sessionStorage.setItem('areaId', areaList[0].id);
              setInitialState((s) => ({
                ...s,
                areaInfo: areaList[0],
              }));
            }}
          >
            {areaList[0]?.areaName}
          </div>
        </div>
      ) : (
        <Carousel
          arrows={true}
          style={{ width: 240, padding: '0 20px' }}
          dots={false}
          infinite={false}
          className={Styles.carousel}
        >
          {(getList || []).map((item: StationListType) => {
            return (
              <div key={item[0].id}>
                <div className={Styles.sItem}>
                  <div
                    className={cls([Styles.lItem, item[0]?.id === currentArea && Styles.selected])}
                    onClick={() => {
                      setCurrentArea(item[0].id);
                      sessionStorage.setItem('areaId', item[0].id);
                      setInitialState((s) => ({
                        ...s,
                        areaInfo: item[0],
                      }));
                    }}
                  >
                    <Tooltip title={item[0]?.areaName}>{item[0]?.areaName}</Tooltip>
                  </div>
                  <div
                    className={cls([Styles.lItem, item[1]?.id === currentArea && Styles.selected])}
                    onClick={() => {
                      setCurrentArea(item[1].id);
                      sessionStorage.setItem('areaId', item[1].id);
                      setInitialState((s) => ({
                        ...s,
                        areaInfo: item[1],
                      }));
                    }}
                  >
                    <Tooltip title={item[1]?.areaName}>{item[1]?.areaName}</Tooltip>
                  </div>
                </div>
              </div>
            );
          })}
        </Carousel>
      )}
    </>
  );
};

export default AreaList;
